<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">
        流程节点信息
      </div>
      <div class="ef-node-form-body">
        <el-form
          :model="node"
          ref="dataForm"
          label-width="80px"
          v-show="type === 'node'"
        >
          <!-- <el-form-item label="类型">
                        <el-input v-model="node.type" :disabled="true"></el-input>
                    </el-form-item> -->
          <el-form-item label="名称">
            <el-input v-model="node.name"></el-input>
          </el-form-item>
          <el-form-item label="left坐标">
            <el-input v-model="node.left" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="top坐标">
            <el-input v-model="node.top" :disabled="true"></el-input>
          </el-form-item>
          <!-- <el-form-item label="ico图标">
                        <el-input v-model="node.ico"></el-input>
                    </el-form-item> -->
          <el-form-item label="角色">
            <el-select
              v-model="node.roles"
              placeholder="请选择"
              clearable
              @change="rolesChange($event)"
            >
              <el-option
                v-for="item in rolesList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="用户">
                      <el-select v-model="node.userID" placeholder="请选择">
                          <el-option
                                  v-for="item in stateList"
                                  :key="item.state"
                                  :label="item.label"
                                  :value="item.state">
                          </el-option>
                      </el-select>
                  </el-form-item> -->
          <el-form-item label="状态">
            <el-select v-model="node.state" placeholder="请选择">
              <el-option
                v-for="item in stateList"
                :key="item.state"
                :label="item.label"
                :value="item.state"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- <el-button icon="el-icon-close">重置</el-button> -->
            <el-button
              size="small"
              icon="el-icon-delete"
              type="danger"
              @click="delNode"
              >删除</el-button
            >
            <el-button type="primary" icon="el-icon-check" @click="save"
              >保存</el-button
            >
          </el-form-item>
        </el-form>

        <el-form
          :model="line"
          ref="dataForm"
          label-width="80px"
          v-show="type === 'line'"
        >
          <el-form-item label="">
            <!-- <el-input v-model="line.label"></el-input> -->
            <el-button
              size="small"
              style=" width: 100%;"
              icon="el-icon-delete"
              type="danger"
              @click="deleteElement"
              >删除连接线</el-button
            >
          </el-form-item>
          <!--  <el-form-item>
            <el-button icon="el-icon-close">重置</el-button>
            <el-button type="primary" icon="el-icon-check" @click="saveLine"
              >保存</el-button
            >
          </el-form-item> -->
        </el-form>
      </div>
      <!--            <div class="el-node-form-tag"></div>-->
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";

export default {
  data() {
    return {
      visible: true,
      // node 或 line
      rolesobj:{},
      type: "node",
      node: {},
      line: {},
      data: {},
      rolesList: [],
      stateList: [
        {
          state: "0",
          label: "审核中"
        },
        {
          state: "1",
          label: "通过"
        },
        {
          state: "2",
          label: "驳回"
        },
        {
          state: "3",
          label: "撤回"
        }
      ]
    };
  },
  created() {
    this.getRoles();
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    // 角色
    getRoles() {
      this.http
        .post("/api/Dictionary/GetVueDictionary", ["roles"])
        .then(res => {
          // console.log(res, "====");
          this.rolesList = res[0].data;
          // console.log(this.rolesList, "this.rolesList");
        });
    },

    nodeInit(data, id) {
      this.type = "node";
      this.data = data;
      data.nodeList.filter(node => {
        if (node.id === id) {
          this.node = cloneDeep(node);
        }
      });
    },
    lineInit(line) {
      this.type = "line";
      this.line = line;
    },
    // 修改连线
    saveLine() {
      this.$emit("setLineLabel", this.line.from, this.line.to, this.line.label);
    },
    // 获取下拉name
    rolesChange(id) {
     this.rolesobj = this.rolesList.find(item => item.key == id) 
    this.node.rolesName =this.rolesobj.value
    },
    save() {
      this.data.nodeList.filter(node => {
        if (node.id === this.node.id) {
          node.name = this.node.name;
          node.left = this.node.left;
          node.top = this.node.top;
          node.ico = this.node.ico;
          node.state = this.node.state;
          node.roles = this.node.roles;
          node.rolesName = this.node.rolesName;
          node.AuditTime = "待审批";
          node.remarks = "";
          node.isAud=0
          this.$emit("repaintEverything");
        }
      });
    },
    deleteElement() {
      this.$emit("deleteElement");
    },
    delNode() {
      this.$emit("delNode", this.node.id);
    }
  }
};
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}
</style>
